<template>
  <div class="songsheet">
    <!--热门歌单标签 -->
    <van-tabs @click="change">
      <van-tab v-for="v in tags" :title="v.name" :key="v.id">
        <p class="all">全部{{ v.name }}</p>
        <ul class="songsheets">
          <li
            v-for="v in playlists"
            :key="v.id"
            @click="gosongListDetail(v.id)"
          >
            <img :src="v.coverImgUrl" alt="" />
            <p class="songsheetname">{{ v.name }}</p>
            <span class="songsheetplay"
              ><van-icon name="play" />{{
                (v.playCount / 10000).toFixed(1) + "万"
              }}</span
            >
          </li>
        </ul>
      </van-tab>
      <span></span>
    </van-tabs>
  </div>
</template>

<script>
import { PlaylisttagAPI } from "@/api/home.js";
import axios from "axios";
export default {
  data() {
    return {
      tags: [],
      playlists: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //精品歌单列表
    //先拿到分类
    async getPlaylisttag() {
      const result = await PlaylisttagAPI();
      console.log("歌单列表", result);
      this.tags = result.data.tags;
    },
    //拿到分类下的歌单
    async change(name = 0, title = "华语") {
      console.log(name, title);
      const result = await axios.get(
        "http://localhost:3000/top/playlist/highquality?cat=" + title
      );
      console.log("分类下的歌单", result);
      this.playlists = result.data.playlists;
      console.log("123", this.playlists);
    },
    //获取歌单详情
    gosongListDetail(id) {
      this.$router.push(`/songlistdetail/${id}`);
    },
  },
  created() {
    this.getPlaylisttag();
    this.change();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.all {
  margin-top: 20px;
  margin-left: 10px;
  font-size: 18px;
}
.songsheet {
  width: 100%;
}
.songsheets {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 10px;
}
.songsheets li {
  display: inline-block;
  width: 30%;
  margin-top: 10px;
  padding-bottom: 10px;
  position: relative;
}
.songsheets img {
  width: 100%;
  border-radius: 20px;
  border: 1px solid #ccc;
}
.songsheetname {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 100%;
  margin-top: 3px;
}
.songsheetplay {
  display: inline-block;
  box-sizing: border-box;
  padding: 1px 8px 2px 4px;
  background-color: rgba(0, 0, 0, 0.329);
  border-radius: 20px;
  color: #fff;
  position: absolute;
  top: 8px;
  right: 5px;
  font-size: 14px;
}
</style>
